<template>
    <div id="app">
        <Header></Header>
        <MyBody></MyBody>
    </div>
</template>

<script>

    /**
     *   1、组件的使用
     *      1、组件的导入
     *          import HelloWorld from './components/HelloWorld.vue'
     *              import 导入
     *              HelloWorld 组件的名称
     *              from "xxx" 组件来自哪里
     *      2、在  components 中注册组件: 设置组件的名称
     *
     *      3、组件的使用 和标签的使用一致   <HelloWorld/>
     *
     *   2、组件的开发:
     *      1、组件可以重复使用
     *      2、组件由由三个模块组成
     *          <template>:  写HTML代码
     *               写html的时候 要给一个root标签
     *          <script>  :  写js代码
     *          1、data()  进行组件的数据绑定 （data 是函数 返回一个对象）
     *          2、created(){}  创建会执行(钩子函数 页面初始化的 加载数据)
     *          3、methods:{}   写js的函数就看见
     *
     *      3、<style>   :  css样式
     *
     *
     */

    import Header from "@/components/Header";
    import MyBody from "@/components/MyBody";

    export default {
        name: 'App',
        components: {
            Header,
            MyBody
        }
    }
</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
